<template>
    <div class="tabs">
        <el-tag size="small"  :closable="tag.name !== 'home'" :effect="$route.name === tag.name ? 'dark' : 'plain'" @click="changeMenu(tag)" @close="handleClose(tag,index)"
        v-for="(tag,index) in tags"
        :key="tag.name"
        :index="index"
        >
            {{tag.label}}
        </el-tag>
    </div>
</template>
<script>

import { mapState , mapMutations } from 'vuex'

export default {
    name: 'CommonTag',
    data(){
        return{

        }
    },
    computed:{
        ...mapState({
           tags: state => state.tab.tabsList 
        })
    },
    methods: {
        ...mapMutations({
            close: 'closeTag'
        }),
        changeMenu(item){
            this.$router.push({ name: item.name })
        },
        handleClose(tag,index){

            const length =  this.tags.length -1
            this.close(tag)
            //第一个判断点击的不是当前路由，就不需要跳转
            console.log(tag.name)
            console.log(this.$router.history.current.name)
            if(tag.name !== this.$router.history.current.name ){
                return;
            }
            if(index === length){
                console.log('1')
                this.$router.push({
                    name:this.tags[index - 1].name
                })
            }else{
                console.log('2')
                this.$router.push({
                    name:this.tags[index].name
                })
            }
        }
    },
}
</script>

<style lang="less" scoped>
    .tabs{
        padding: 20px;
        .el-tag{
            margin-right: 15px;
            cursor: pointer;
        }
    }
</style>